import 'package:dio/dio.dart';
import 'package:flower/components/custom_toast.dart';
import 'package:flower/config/nav_key.dart';
import 'package:flower/config/service_url.dart';
import 'package:flower/model/base_model.dart';
import 'package:flower/model/cart_list.dart';
import 'package:flower/pages/index_page.dart';
import 'package:flower/provider/cart_model.dart';
import 'package:flower/utils/http_util.dart';
import 'package:flower/utils/my_colors.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

/* 订单支付 */
class OrderPay extends StatefulWidget {
  final double amount;
  final String number;

  const OrderPay({super.key, required this.amount, required this.number});

  @override
  State<OrderPay> createState() => _OrderPayState();
}

class _OrderPayState extends State<OrderPay> {
  var check = 1;

  void _queryCartListData() async {
    Response result = await HttpUtil.get(listUserCart);
    CartListModel cartListModel = CartListModel.fromJson(result.data);
    setState(() {
      context.read<CartModel>().setCartListData(cartListModel.data);
    });
  }

  // 取消订单
  void handleCancel() async {
    Map<String, dynamic> map = <String, dynamic>{};
    map["number"] = widget.number;

    Response result = await HttpUtil.post(cancelOrder, queryParameters: map);
    BaseModel baseModel = BaseModel.fromJson(result.data);
    if (baseModel.code == 1) {
      CustomToast.showSuccessToast("取消订单成功~");
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => const IndexPage(initialIndex: 1),
      ));
    }
  }

  // 支付订单
  void handlePay() async {
    Map<String, dynamic> map = <String, dynamic>{};
    map["number"] = widget.number;
    map["payMethod"] = check;

    Response result = await HttpUtil.post(payOrder, queryParameters: map);
    BaseModel baseModel = BaseModel.fromJson(result.data);
    if (baseModel.code == 1) {
      Provider.of<CartModel>(context, listen: false).removeSelectedItems();
      _queryCartListData();
      CustomToast.showSuccessToast("支付成功啦~");
      Response result = await HttpUtil.get(listUserCart);
      CartListModel cartListModel = CartListModel.fromJson(result.data);
      setState(() {
        context.read<CartModel>().setCartListData(cartListModel.data);
      });
      Navigator.of(context).push(MaterialPageRoute(
        builder: (context) => const IndexPage(initialIndex: 1),
      ));
    }
  }

  @override
  Widget build(BuildContext context) {
    var border = const BorderSide(width: 1, color: MyColors.driver);
    var boxDecoration = BoxDecoration(border: Border(bottom: border));
    return Scaffold(
      appBar: AppBar(
        backgroundColor: MyColors.white,
        title: const Text("支付"),
        titleTextStyle: const TextStyle(fontSize: 16, color: MyColors.normal),
        centerTitle: true,
      ),
      body: Container(
        color: MyColors.white,
        width: MediaQuery.of(context).size.width,
        padding: const EdgeInsets.only(top: 44),
        child: Column(
          children: [
            Column(
              children: [
                Text("订单号：${widget.number}",
                    style:
                        const TextStyle(fontSize: 12, color: MyColors.title)),
                const SizedBox(
                  height: 5,
                ),
                const Text("支付金额",
                    style: TextStyle(fontSize: 12, color: MyColors.title)),
                const SizedBox(
                  height: 5,
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text("￥",
                        style: TextStyle(fontSize: 20, color: MyColors.normal)),
                    Text(widget.amount.toString(),
                        style: const TextStyle(
                            fontSize: 25, color: MyColors.normal)),
                  ],
                )
              ],
            ),
            const SizedBox(
              height: 30,
            ),
            Container(
              height: 60,
              margin: const EdgeInsets.only(left: 30),
              padding: const EdgeInsets.only(right: 18),
              decoration: boxDecoration,
              child: Row(
                children: [
                  Image.asset(
                    "assets/images/wx_pay.png",
                    height: 27,
                    width: 26,
                    // fit: BoxFit.contain,
                  ),
                  const SizedBox(
                    width: 16,
                  ),
                  const Expanded(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Text("微信支付",
                            style: TextStyle(
                                fontSize: 16, color: MyColors.normal)),
                        SizedBox(
                          height: 2,
                        ),
                        Text("推荐使用微信支付",
                            style:
                                TextStyle(fontSize: 12, color: MyColors.title)),
                      ],
                    ),
                  ),
                  Transform.scale(
                    scale: 1.3,
                    child: Checkbox(
                        value: check == 1,
                        activeColor: MyColors.red,
                        shape: const CircleBorder(),
                        side:
                            const BorderSide(width: 1, color: MyColors.normal),
                        onChanged: (value) {
                          setState(() {
                            check = 1;
                          });
                        }),
                  )
                ],
              ),
            ),
            Container(
              height: 60,
              margin: const EdgeInsets.only(left: 30, bottom: 30),
              padding: const EdgeInsets.only(right: 18),
              child: Row(
                children: [
                  Image.asset(
                    "assets/images/ali_pay.png",
                    height: 27,
                    width: 26,
                  ),
                  const SizedBox(
                    width: 16,
                  ),
                  const Expanded(
                    child: Text("支付宝支付",
                        style: TextStyle(fontSize: 16, color: MyColors.normal)),
                  ),
                  Transform.scale(
                    scale: 1.3,
                    child: Checkbox(
                        value: check == 2,
                        activeColor: MyColors.red,
                        shape: const CircleBorder(),
                        side:
                            const BorderSide(width: 1, color: MyColors.normal),
                        onChanged: (value) {
                          setState(() {
                            check = 2;
                          });
                        }),
                  )
                ],
              ),
            ),
            InkWell(
              onTap: () {
                handleCancel();
              },
              child: Container(
                alignment: Alignment.center,
                width: MediaQuery.of(context).size.width,
                height: 40,
                margin: const EdgeInsets.only(top: 15, left: 30, right: 30),
                decoration: BoxDecoration(
                  color: MyColors.red,
                  borderRadius: BorderRadius.circular(5),
                ),
                child: const Text(
                  '取消订单',
                  style: TextStyle(color: MyColors.white, fontSize: 16),
                ),
              ),
            ),
            InkWell(
              onTap: () {
                handlePay();
              },
              child: Container(
                alignment: Alignment.center,
                width: MediaQuery.of(context).size.width,
                height: 40,
                margin: const EdgeInsets.only(top: 15, left: 30, right: 30),
                decoration: BoxDecoration(
                  color: MyColors.red,
                  borderRadius: BorderRadius.circular(5),
                ),
                child: const Text(
                  '确认支付',
                  style: TextStyle(color: MyColors.white, fontSize: 16),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}
